<template>
	<view class="content">
	
			<view class="basketball">篮球</view>
			<view @click="leagueClick(itme.id,itme.extType,itme.shortName,itme.logoPath)" v-show="itme.extType === 2" class="league" v-for="itme in logoArr" :key="itme.id">
				<view class="league-img">
					<image :src="itme.logoPath" mode="aspectFit"></image>
				</view>
				<view class="league-name">
					{{itme.shortName}}
				</view>
			</view>
			
		<view class="football">足球</view>
		<view  @click="leagueClick(itme.id,itme.extType,itme.shortName,itme.logoPath)" v-show="itme.extType === 1" class="league" v-for="itme in logoArr" :key="itme.id">
			<view class="league-img">
				<image :src="itme.logoPath" mode="aspectFit"></image>
			</view>
			<view class="league-name">
				{{itme.shortName}}
			</view>
		</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logoArr:[]
			};
		},
		onLoad() {
			this.getLogoData()
		},
		methods:{
			getLogoData(){
				uni.request({
					url: `https://cbs-i.sports.cctv.com/cache/ef972bd6675867a16c8fd5c0b4597a56?ran=${Date.now()}`,
					/* https://cbs-i.sports.cctv.com/cache/ef972bd6675867a16c8fd5c0b4597a56?ran=1668853113695 */
					method: 'GET',
					data: {},
					success: res => { 
						console.log(res.data.results);				
						/* //过滤数组
						 let arr = res.data.results.filter((value)=>{
							return value.id === 0 || value.id === 3238 || value.id === 3325 || value.id === 3246 || value.id === 3239 || value.id === 3400 || value.id === 4314 || value.id === 4315
						});
						//将过滤好的数组按照自己想要的顺序排列
						arr.sort((a,b)=>{
							let sortArr = ['热门','世界杯','NBA','CBA','英超','中超','欧冠','意甲']
							return sortArr.indexOf(a.league) - sortArr.indexOf(b.league)
						}) */
						//赋值
						this.logoArr = res.data.results
						console.log(this.logoArr);
					},
					fail: () => {},
					complete: () => {}
				});
			},
			leagueClick(id,extType,shortName,logoPath){
				console.log(id,extType,'leagueClick--------');
				uni.navigateTo({
					url:`/pages/ranking-details/ranking-details?id=${id}&type=${extType}&shortName=${shortName}&logoPath=${logoPath}`
				})
			}
		}
	}
</script>

<style lang="scss">
.content{
    display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	
	/* margin: 20rpx 15rpx; */
	
	.basketball{
		position: relative;
		display: inline-block;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 38rpx;
		margin-bottom: 40rpx;
		color: #fff;
		background: linear-gradient(180deg, #0b5994 3%, #121315 100%);
	}
	
	.football{
		position: relative;
		display: inline-block;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 38rpx;
		margin-bottom: 40rpx;
		color: #fff;
		background: linear-gradient(180deg, #9c2f0b 3%, #121315 100%);
	}
	
	.league{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 180rpx;
		height: 200rpx;
		
		.league-img{
			width: 120rpx;
			height: 120rpx;	
			image{
				width: 100%;
				height: 100%;
			}		
		}
		.league-name{
			font-size: 32rpx;
			padding-top: 10rpx;
		}
	}
}
</style>
